﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>翻页效果的公告栏</title>
    <style>
        #divMsg {
            line-height: 20px;
            height: 10px;
            overflow: hidden;
        }
    </style>
    <script>
        var Scroll = new function () {
            this.delay = 2000;
            this.height = 20;
            this.step = 4;
            this.curHeight = 0;
            this.stimer = null;
            this.start = function () {
                this.move();
            }
            this.move = function () {
                var self = this;
                if (this.curHeight == this.height) {
                    this.timer = setTimeout(function () {
                        self.move();
                    }, this.delay);
                    this.curHeight = 0;
                    if (this.element.scrollTop >= this.element.scrollHeight - this.height) {
                        this.element.scrollTop = 0;
                    }
                    return true;
                }
                this.element.scrollTop += this.step;
                this.curHeight += this.step;
                this.timer = setTimeout(function () {
                    self.move();
                }, 30);
            }
            this.stop = function () {
                clearTimeout(this.timer);
            }
        }
    </script>
</head>
<body>
    <div id="divMsg">
        张三奥运会历史性的突破，拿到了男子100米金牌<br />
        奥运会历史上的首位8金得主<br />
        北京奥运会欢迎志愿者的参与<br />
        奥运会带来了什么样的商机<br />
        北京奥运会2008年举行<br />
        娱乐新闻请转到娱乐主页<br />
        今天又获得一枚金牌<br />
    </div>

    <script>
        Scroll.element = document.getElementById('divMsg');
        Scroll.start();
    </script>

    <input type="button" value="开始" onclick="Scroll.start()" />
    <input type="button" value="停止" onclick="Scroll.stop()" />

</body>
</html>